// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = 'Nunito, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
Chart.defaults.global.defaultFontColor = '#858796';

// Number formatting function (保持不变)
function number_format(number, decimals, dec_point, thousands_sep) {
    // *     example: number_format(1234.56, 2, ',', ' ');
    // *     return: '1 234,56'
    //...
}

var ctx = document.getElementById("myRadarChart");
var myRadarChart = new Chart(ctx, {
    type: 'radar',
    data: {
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        datasets: [
            {
                label: "Earnings",
                lineTension: 0.3,
                backgroundColor: "rgba(78, 115, 223, 0.2)", // 调整填充颜色
                borderColor: "rgba(78, 115, 223, 1)", // 线条颜色
                borderWidth: 2, // 增加线条宽度
                pointRadius: 5, // 数据点半径
                pointBackgroundColor: "rgba(78, 115, 223, 1)",
                pointBorderColor: "#ffffff", // 数据点边框颜色
                pointHoverRadius: 7, // 悬停时数据点半径
                pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
                pointHoverBorderColor: "rgba(78, 115, 223, 1)",
                pointHitRadius: 10, // 增加触摸敏感度
                data: [0, 10000, 5000, 15000, 10000, 20000, 15000, 25000, 20000, 30000, 25000, 40000],
            },
            {
                label: "info",
                lineTension: 0.3,
                backgroundColor: "rgba(78, 115, 223, 0.2)", // 调整填充颜色
                borderColor: "rgba(78, 115, 223, 1)", // 线条颜色
                borderWidth: 2, // 增加线条宽度
                pointRadius: 5, // 数据点半径
                pointBackgroundColor: "rgba(78, 115, 223, 1)",
                pointBorderColor: "#ffffff", // 数据点边框颜色
                pointHoverRadius: 7, // 悬停时数据点半径
                pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
                pointHoverBorderColor: "rgba(78, 115, 223, 1)",
                pointHitRadius: 10, // 增加触摸敏感度
                data: [0, 5000, 2500, 10000, 5000, 15000, 10000, 20000, 15000, 25000, 20000, 35000],
            }
        ],
    },
    options: {
        responsive: true, // 响应式
        maintainAspectRatio: false,
        layout: {
            padding: {
                left: 10,
                right: 25,
                top: 25,
                bottom: 0
            }
        },
        scales: {
            r: {
                suggestedMin: 0,
                suggestedMax: 45000,
                tick: {
                    display: true,
                    color: 'rgba(234, 236, 244, 1)', // 网格线颜色
                    callback: function (value) {
                        return '$' + number_format(value);
                    }
                },
                grid: {
                    color: "rgba(234, 236, 244, 0.5)", // 设置网格颜色和透明度
                    lineWidth: 1
                },
            }
        },
        plugins: {
            tooltip: {
                backgroundColor: "rgb(255,255,255)",
                bodyFontColor: "#858796",
                borderColor: '#dddfeb',
                borderWidth: 1,
                xPadding: 15,
                yPadding: 15,
                displayColors: false,
                caretPadding: 10,
                callbacks: {
                    label: function (tooltipItem) {
                        var datasetLabel = tooltipItem.dataset.label || '';
                        return datasetLabel + ': $' + number_format(tooltipItem.raw);
                    }
                }
            }
        },
        legend: {
            display: true,
            position: 'top', // 图例位置
            labels: {
                fontColor: '#858796',
                padding: 20,
            }
        }
    }
});